<template>
  <div id="logIndex">
    <!--上部搜索条件组件-->
    <topSearch
      :form-inline="formInline"
      @toSearch="toSearch"
      @getOperType="getOperType"
    ></topSearch>
    <div class="table-conBtn">
      <el-button type="danger" icon="el-icon-delete" @click="cleanLog">
        清空
      </el-button>
      <el-button
        v-permission="'wh:monitor:operlog:remove'"
        type="warning"
        plain
        @click="delMul"
      >
        批量删除
      </el-button>
      <el-button
        v-permission="'wh:monitor:operlog:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportData"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        label="日志编号"
        prop="operId"
        show-overflow-tooltip
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="系统模块"
        prop="title"
        min-width="130"
      ></el-table-column>
      <el-table-column label="操作类型" prop="businessType" min-width="130">
        <template slot-scope="scope">
          <span
            v-if="scope.row.businessType"
            class="tag-span"
            :class="scope.row.businessType | filterClass('operType')"
            >{{ scope.row.businessType | filterName('operType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作人员"
        prop="operName"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="部门名称"
        prop="deptName"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="主机"
        prop="operIp"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="操作地点"
        prop="operLocation"
        min-width="120"
      ></el-table-column>
      <el-table-column label="操作状态" prop="status" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0" class="tag-span primary"
            >成功</span
          >
          <span v-if="scope.row.status === 1" class="tag-span danger"
            >失败</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作时间"
        show-overflow-tooltip
        prop="operTime"
        width="150"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:monitor:operlog:detail'"
            type="text"
            @click="editPage('edit', scope.row.operId)"
          >
            详情
          </el-button>
          <el-button
            v-permission="'wh:monitor:operlog:remove'"
            type="text"
            @click="delSingle(scope.row.operId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogDetail
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      :type-list="typeList"
    ></dialogDetail>
  </div>
</template>

<script>
import topSearch from '@component/system/logManage/operLog/topSearch' // 上部搜索条件
import dialogDetail from '@component/system/logManage/operLog/dialogDetail' // 详情弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  deleteSingleRequest,
  deleteMultRequest,
  clearRequest,
  downUrl
} from '@/api/system/operLog'
export default {
  name: 'operLog',
  msg: '日志管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogDetail
  },
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      typeList: [], // 操作类型
      formInline: {
        // 搜索条件
        title: '', // 系统模块
        operUserId: '', // 操作人员
        businessType: '', // 操业务类型(0=其它,1=新增,2=修改,3=删除,4=授权,5=导出,6=导入,7=强退,8=生成代码,9=清空数据)
        status: '', // 状态0正常,1停用
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: [],
        operParam: '' // 请求参数
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      multipleSelection: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },

  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = Object.assign({}, this.searchParams, this.formInline)
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 新增、编辑 */
    editPage(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.params = params
    },
    /* 批量删除 */
    delMul() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条日志！')
        return
      }

      this.$confirm(
        `确认删除选中的这${this.multipleSelection.length}条日志?`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        if (this.multipleSelection.length === 1) {
          ids[0] = this.multipleSelection[0].operId
          this.delItem(ids[0])
        } else {
          this.multipleSelection.forEach((item) => {
            ids.push(item.operId)
          })
          this.delMulRequest(ids)
        }
      })
    },
    // 删除单个
    delSingle(id) {
      this.$confirm('确认删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem(id)
      })
    },
    // 删除单个请求
    delItem(id) {
      deleteSingleRequest(
        id,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 删除多个日志请求
    delMulRequest(ids) {
      // let url = 'oper-logs'
      let params = { ids }
      deleteMultRequest(
        params,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 清空 */
    cleanLog() {
      this.$confirm('确定清空所有操作日志吗?', '清空提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearRequest(
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    /* 导出 */
    exportData() {
      this.$confirm('确定导出所有操作日志吗?', '导出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let url = downUrl()
          let params = Object.assign({}, this.searchParams, this.formInline)
          delete params.createTime
          this.downFile('get', url, params, '操作日志')
        })
        .catch(() => {})
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取操作类型列表 */
    getOperType(ary) {
      this.typeList = [...ary]
    }
  }
}
</script>

<style lang="less">
// #index {
// }
</style>
